<template>
    <ul :style="{ height: (height - 35) + 'px' }">
      <treeNode
        v-for="node in nodes"
        :key="node.id"
        :node="node"
        :select_id="select_id"
        @node-clicked="handleNodeClicked"
      ></treeNode>
    </ul>
  </template>
  <script>
  import treeNode from './treeNode.vue'
  export default {
    components: {
        treeNode
    },
    props: {
      // 节点数据
      nodes: Array,
      // 当前选中的节点
      select_id: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 100
      }
    },
    methods: {
      // 定义一个节点点击事件
      handleNodeClicked (clickedNode) {
        this.$emit('node-clicked', clickedNode)
      }
    }
  }
  </script>
  <style scoped>
  ul {
    list-style: none;
    width: 85%;
    padding: 15px;
    margin-block-start: auto;
    margin-inline-end: auto;
    overflow: auto;
  }
  </style>
